<template>
	<view v-if="visible" class="ob-loading" :class="{ 'ob-loading--overlay': overlay }">
		<view class="ob-loading__content" :style="{ backgroundColor: backgroundColor }">
			<view class="ob-loading__spinner" :class="`ob-loading__spinner--${type}`">
				<view v-if="type === 'spinner'" class="spinner">
					<view v-for="i in 12" :key="i" class="spinner__dot" :style="{ animationDelay: `${i * 0.1}s` }"></view>
				</view>
				<view v-else-if="type === 'circle'" class="circle-loader">
					<view class="circle"></view>
				</view>
				<view v-else-if="type === 'dots'" class="dots-loader">
					<view class="dot" v-for="i in 3" :key="i" :style="{ animationDelay: `${i * 0.15}s` }"></view>
				</view>
			</view>
			<text v-if="text" class="ob-loading__text" :style="{ color: textColor }">{{ text }}</text>
		</view>
	</view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

// 定义组件名称
defineOptions({
  name: 'ob-loading'
})

const props = defineProps({
	// 是否显示
	visible: {
		type: Boolean,
		default: false
	},
	// 加载文本
	text: {
		type: String,
		default: '加载中...'
	},
	// 加载动画类型
	type: {
		type: String,
		default: 'spinner', // spinner, circle, dots
		validator: (value) => ['spinner', 'circle', 'dots'].includes(value)
	},
	// 是否显示遮罩层
	overlay: {
		type: Boolean,
		default: true
	},
	// 背景色
	backgroundColor: {
		type: String,
		default: 'rgba(255, 255, 255, 0.9)'
	},
	// 文字颜色
	textColor: {
		type: String,
		default: '#666666'
	}
})

const emit = defineEmits(['close'])
</script>

<style lang="scss" scoped>
.ob-loading {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	
	&--overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
		background-color: rgba(0, 0, 0, 0.3);
	}
	
	&__content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20px;
		border-radius: 8px;
		min-width: 80px;
		min-height: 80px;
	}
	
	&__spinner {
		margin-bottom: 10px;
		
		&--spinner {
			.spinner {
				position: relative;
				width: 32px;
				height: 32px;
				
				&__dot {
					position: absolute;
					width: 2px;
					height: 8px;
					background-color: var(--primary-color);
					border-radius: 1px;
					animation: spinner-rotate 1.2s linear infinite;
					
					&:nth-child(1) { transform: rotate(0deg) translate(0, -12px); }
					&:nth-child(2) { transform: rotate(30deg) translate(0, -12px); }
					&:nth-child(3) { transform: rotate(60deg) translate(0, -12px); }
					&:nth-child(4) { transform: rotate(90deg) translate(0, -12px); }
					&:nth-child(5) { transform: rotate(120deg) translate(0, -12px); }
					&:nth-child(6) { transform: rotate(150deg) translate(0, -12px); }
					&:nth-child(7) { transform: rotate(180deg) translate(0, -12px); }
					&:nth-child(8) { transform: rotate(210deg) translate(0, -12px); }
					&:nth-child(9) { transform: rotate(240deg) translate(0, -12px); }
					&:nth-child(10) { transform: rotate(270deg) translate(0, -12px); }
					&:nth-child(11) { transform: rotate(300deg) translate(0, -12px); }
					&:nth-child(12) { transform: rotate(330deg) translate(0, -12px); }
				}
			}
		}
		
		&--circle {
			.circle-loader {
				width: 32px;
				height: 32px;
				
				.circle {
					width: 100%;
					height: 100%;
					border: 3px solid #f3f3f3;
					border-top: 3px solid var(--primary-color);
					border-radius: 50%;
					animation: circle-rotate 1s linear infinite;
				}
			}
		}
		
		&--dots {
			.dots-loader {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 4px;
				
				.dot {
					width: 8px;
					height: 8px;
					background-color: var(--primary-color);
					border-radius: 50%;
					animation: dots-bounce 1.4s ease-in-out infinite both;
				}
			}
		}
	}
	
	&__text {
		font-size: 14px;
		text-align: center;
		line-height: 1.4;
	}
}

@keyframes spinner-rotate {
	0%, 70%, 100% {
		opacity: 0.3;
		transform: scale(0.8);
	}
	40% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes circle-rotate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes dots-bounce {
	0%, 80%, 100% {
		transform: scale(0);
	}
	40% {
		transform: scale(1);
	}
}
</style>